{{extend 'layout.html'}}

<style>
  .chart {width: 90%}
  .chart a {text-decoration: none; }
  .chart table {width:80%; font-size: 0.7em}
  .chart table, .chart th, .chart tr, .chart td { border:0; padding:0; margin:0; vertical-align:middle;}
</style>

{{m = max(d[1] for d in data)}}
<div class="chart ui-body ui-body-c ui-corner-all">
  <center>
    <table>
      <tr>
        <th style="text-align:right; width:150px">{{=prefix.capitalize()}}</th>
        <th style="width:10px"></th>
        <th style="text-align:left">Number of data sets</th>
      </tr>
      {{for d in data:}}
      <tr>
        <td style="text-align:right; width:150px">
          <a rel="external" href="{{=URL('bytag',vars=dict(tag='%s/%s' %(prefix,d[0])))}}">{{=d[0]}}</a>
        </td>
        <td style="width:10px"></td>
        <td style="text-align:left; white-space:nowrap">
          <div style="float: left; height:10px; width:{{=400*d[1]/m}}px; background-color: #FADB4E; border: 1px solid black;" class="chartbar ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-d"></div>
          &nbsp;{{=d[1]}}
      </td>
      </tr>
      {{pass}}
    </table>
  </center>
</div>

<script>
  jQuery('.chartbar').each(function(){
     var size = jQuery(this).css('width');
     jQuery(this).css('width',0).animate({'width':size},1500*Math.random());
  });
</script>
